import Taro, { Component } from "@tarojs/taro";
import { View, Swiper, SwiperItem, Image, Text } from "@tarojs/components";
import {IStoreProps} from '../../store/Stores'
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {getRuntime} from '../../utils/common'

import './index.less'
import bg_01 from '../../assets/img/bg_01.jpg'
import bg_02 from '../../assets/img/bg_02.jpg'
import bg_03 from '../../assets/img/bg_03.jpg'
import bg_04 from '../../assets/img/bg_04.jpg'


// 工程金融中心-首页
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Index extends Component<IHomeProps>{
  constructor(props){
    super(props)
  }

  state = {
    count: {}
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'工程金融中心' })
    this.getCount()
  }

  getCount() {
    let { FinancialCenterStore } = this.props.stores
    FinancialCenterStore.getCount({
      callback: res => {
        this.setState({
          count: toJS(res)
        })
      }
    })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    if(!getRuntime().getToken()) { getRuntime().navigateTo('/pages/login/login'); return }
    getRuntime().navigateTo(url)
  }


  render() {
    let { count } = this.state
    return(
      <View className='finance-center'>
        <View className='finance-item' onClick={this.handelRouter.bind(this, '/pages/finance/page1')}>
          <Image className='finance-bg' src={bg_01} />
          <View className='finance-info'>
            <View className='title-en'>ENGINEERING CASH</View>
            <View className='title'>工程保函中心</View>
            <View className='num'>已成功办理 {count.letterOfGuaranteeCount} 人</View>
            <View className='btn btn1'>立即办理></View>
          </View>
        </View>

        <View className='finance-item' onClick={this.handelRouter.bind(this, '/pages/finance/page2')}>
          <Image className='finance-bg' src={bg_02} />
          <View className='finance-info'>
            <View className='title-en'>ENGINEERING CASH</View>
            <View className='title'>工程现金</View>
            <View className='num'>已成功办理 {count.projectCashcsCount} 人</View>
            <View className='btn btn2'>立即申请></View>
          </View>
        </View>

        <View className='finance-item' onClick={this.handelRouter.bind(this, '/pages/finance/page3')}>
          <Image className='finance-bg' src={bg_03} />
          <View className='finance-info'>
            <View className='title-en'>ENGINEERING COOPERATION</View>
            <View className='title'>工程项目预约</View>
            <View className='num'>已成功合作 {count.projectSubscribeCount} 人</View>
            <View className='btn btn3'>立即预约></View>
          </View>
        </View>

        <View className='finance-item' onClick={this.handelRouter.bind(this, '/pages/finance/page4')}>
          <Image className='finance-bg' src={bg_04} />
          <View className='finance-info'>
            <View className='title-en'>OTHER ENGINEERING CASH</View>
            <View className='title'>其他工程服务</View>
            <View className='num'>已成功办理 {count.projectCount} 人</View>
            <View className='btn btn4'>立即预约></View>
          </View>
        </View>
      </View>
    )
  }
}

export default Index
